<template>
    <div style="width: auto;height: 300px" id="echarts2">
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { listDept } from "@/api/front/statistics";

export default {
    name: 'echarts2',
    data() {
        return {
            // option配置
            option: {
                title: {
                    text: '各部门人数',
                    subtext: '若依科技',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '部门人数',
                        type: 'pie',
                        radius: '50%',
                        data: [], // 初始为空，等待数据填充
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        }
    },
    mounted() {
        this.getDeptList();
    },
    methods: {
        echartsInit() {
            // 在生命周期中挂载
            const chart = echarts.init(document.getElementById('echarts2'));
            chart.setOption(this.option);
        },
        /** 查询各部门总数 */
        getDeptList() {
            listDept().then(response => {
                // 将后端返回的数据转换为 ECharts 饼图所需的格式
                this.option.series[0].data = response.map(item => ({
                    value: item.employeeCount, // 使用 employeeCount 作为人数
                    name: item.departmentName   // 使用 departmentName 作为部门名称
                }));

                // 更新图表
                this.echartsInit();
            }).catch(error => {
                console.error('Error fetching department list:', error);
            });
        }
    }
}
</script>

<style scoped></style>